<template>
    <div class="loginBox">
        <div class="loginMain">
            <div class="iconfont big-wangyiyunyinle one"></div>
            <div class="two">
                <span @click="twoClick('登录')" :class="twoClickFlag =='登录'? 'spanActive':''">登录</span>
                <span @click="twoClick('注册')" :class="twoClickFlag =='注册'? 'spanActive':''">注册</span>
            </div>
            <div class="user">
                <span class="iconfont big-denglu icon"></span>
                <span class="input">
                    <el-input placeholder="手机号/邮箱/用户名" v-model="userName"></el-input>
                </span>
            </div>
            <div class="user">
                <span class="iconfont big-denglumima icon"></span>
                <span class="input">
                    <el-input show-password placeholder="密码" v-model="password"></el-input>
                </span>
            </div>
            <div class="RememberPassWord">
                <span>
                    <el-checkbox @change="change" v-model="checked">记住密码</el-checkbox>
                </span>
                <span style="cursor: pointer;">忘记密码？</span>
            </div>
            <div class="log" @click="login()">登 录</div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            twoClickFlag:'登录',
            userName:"",
            password:"",
            checked:"",
        }
    },
    mounted(){
        history.pushState(null, null, );
        window.addEventListener('popstate', function () {

            history.pushState(null, null, document.URL);

        });
    },
    methods:{
        twoClick(type){
            this.twoClickFlag = type;
        },
        // 记住密码
        change(value){
            console.log(value);
        },
        // 登录
        login(){
            this.$axios.get(`/login/cellphone?phone=${this.userName}&password=${this.password}`).then(res=>{
                if(200==res.data.code){
                    this.$store.dispatch('loginInfo',res.data);
                    this.$router.push('/DiscoverMusic');
                    let loginInfo = JSON.stringify(res.data)
                    localStorage.setItem('loginInfo',loginInfo)
                }else{
                    this.$message.error('用户名或密码错误!')
                }
            }).catch(error=>{
                this.$message.error('用户名或密码错误!')
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@import "./Login.scss";
</style>